<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>庄磊简历4</title>
    <meta name="viewport" content="width=device-width" />
    <!-- favicon图标 -->
    <link
      rel="shortcut icon"
      href="../../static/favicon.png"
      type="image/x-icon"
    />
    <!-- 51la网站统计 -->
    <script src="../../static/js/tongji.js"></script>
    <link rel="stylesheet" href="./css/index.css" />
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/c/font_3846864_ne2hgo35mmf.css"
    />
  </head>

  <body>
    <!-- ------------ 个人简历 start------------ -->
    <div class="resume" id="app">
      <!-- ------------ 简历头部 start------------ -->
      <div class="resume-head">
        <div class="bg-font">ZHUANGLEI</div>
        <div class="touxiang">
          <!-- 照片 -->
          <img src="./img/tx.jpg" alt="" />
        </div>

        <!-- 姓名 -->
        <h2>{{datas.xinxi.user}}<i></i></h2>

        <!-- 求职意向 -->
        <div class="qiuzhi">{{datas.xinxi.name}}：{{datas.xinxi.text}}</div>

        <!-- 徽章标签 -->
        <!-- <ul class="huizhang">
				<li v-for="(item, index) in datas.xinxi.data" :key="index" v-show="index < 5">
					{{item.text}}
				</li>
			</ul> -->

        <!-- 个人信息 -->
        <ul class="col-shu">
          <li
            v-for="(item, index) in datas.xinxi.data"
            :key="index"
            v-show="index<5"
          >
            {{item.text}}
          </li>
        </ul>
      </div>
      <!-- ------------ 简历头部  end ------------ -->

      <main>
        <!-- ------------ 简历主体 start------------ -->
        <div class="resume-main">
          <!-- ------------ 教育背景 start------------ -->
          <div class="module jiaoyu">
            <div class="module-title">{{datas.jiaoyu.title}}</div>
            <div class="module-content">
              <div
                class="module-wrap"
                v-for=" (item, index) in datas.jiaoyu.data"
                :key="index"
              >
                <ul class="col-3">
                  <li>{{ item.time }}</li>
                  <li>{{ item.name }}</li>
                  <li>{{ item.type }}</li>
                </ul>
              </div>
            </div>
          </div>

          <!-- ------------ 教育背景  end ------------ -->

          <!-- ------------ 工作经验 start------------ -->
          <div class="module gongzuo">
            <div class="module-title">{{datas.gongzuo.title}}</div>
            <div class="module-content">
              <div
                class="module-wrap"
                v-for="(item, index) in datas.gongzuo.data"
                :key="index"
                v-show="index < 6"
              >
                <ul class="col-3">
                  <li>{{item.time}}</li>
                  <li>{{item.name}}</li>
                  <li>{{item.type}}</li>
                </ul>
                <div class="item-edit">
                  <ul v-for="(item, index) in item.data" :key="index">
                    <li>{{item.text}}</li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- ------------ 工作经验  end ------------ -->

          <!-- ------------ 培训经历 start------------ -->
          <div class="module">
            <div class="module-title">{{datas.peixun.title}}</div>
            <div class="module-content">
              <div
                class="module-wrap"
                v-for="(item, index) in datas.peixun.data"
                :key="index"
                v-show="index<4"
              >
                <ul class="col-3">
                  <li>{{item.time}}</li>
                  <li>{{item.name}}</li>
                  <li>{{item.type}}</li>
                </ul>
              </div>
            </div>
          </div>
          <!-- ------------ 培训经历  end ------------ -->

          <!-- ------------ 荣誉证书 start------------ -->
          <div class="module zhengshu" v-if="datas.zhengshu">
            <div class="module-title">{{datas.zhengshu.title}}</div>
            <div class="module-content">
              <div class="module-wrap">
                <div class="col-2">
                  <!-- 左边 -->
                  <ul>
                    <li
                      v-for="(item, index) in datas.zhengshu.data.ry"
                      :key="index"
                      v-show="index<6"
                    >
                      {{item.name}}{{item.text}}
                    </li>
                  </ul>
                  <!-- 右边 -->
                  <ul>
                    <li
                      v-for="(item, index) in datas.zhengshu.data.zs"
                      :key="index"
                      v-show="index<6"
                    >
                      {{item.name}}{{item.text}}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>

          <!-- ------------ 荣誉证书  end ------------ -->
          <!-- ------------ 项目经验 start------------ -->
          <div class="module xiangmu" v-if="datas.xiangmu">
            <div class="module-title">{{datas.xiangmu.title}}</div>
            <div class="module-content">
              <div
                class="module-wrap"
                v-for="(item, index) in datas.xiangmu.data"
                :key="index"
                v-show="index<1"
              >
                <!-- 左右两行 -->
                <ul class="item-col2">
                  <li v-if="item.name">{{item.name}}</li>
                  <li v-if="item.text">{{item.text}}</li>
                </ul>
                <div class="item-edit">
                  <!-- 项目介绍 -->
                  <p v-for="(item, index) in item.jieshao" :key="index">
                    <strong>{{item.name}}：</strong><span>{{item.text}}</span>
                  </p>
                  <!-- 项目职责 -->
                  <div>
                    <strong>{{item.zhize.name}}：</strong>
                    <ul>
                      <li v-for="(item, index) in item.zhize.data" :key="index">
                        {{item.text}}
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- ------------ 项目经验  end ------------ -->

          <!-- ------------ 专业技能 start------------ -->
          <div class="module jineng" v-if="datas.jineng">
            <div class="module-title">{{datas.jineng.title}}</div>
            <div class="module-content">
              <div class="module-wrap">
                <div class="item-edit">
                  <ul>
                    <li
                      v-for="(item, index) in datas.jineng.data"
                      :key="index"
                      v-show="index < 6 "
                    >
                      {{item.text}}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- ------------ 专业技能  end ------------ -->

          <!-- ------------ 个人评价 start------------ -->
          <div class="module jineng" v-if="datas.pingjia">
            <div class="module-title">{{datas.pingjia.title}}</div>
            <div class="module-content">
              <div class="module-wrap">
                <div class="item-edit">
                  <ul>
                    <li
                      v-for="(item, index) in datas.pingjia.data"
                      :key="index"
                      v-show="index < 6 "
                    >
                      {{item.text}}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- ------------ 个人评价 end ------------ -->
        </div>
        <!-- ------------ 简历主体  end ------------ -->
      </main>

      <!-- ------------ 底部版权 start------------ -->
      <div class="resume-foot">
        Copyright &copy; 2023 &nbsp;
        <a href="//bealei.com">bealei.com</a>
        &nbsp; 版权所有.
      </div>
    </div>
    <!-- ------------ 底部版权  end ------------ -->

    <script src="./js/vue-2.7.14.min.js"></script>
    <script src="./js/datajson.js"></script>

    <script type="text/javascript">
      Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。
      new Vue({
        el: "#app",

        data() {
          return {
            datas: res.content,
          };
        },
        mounted() {
          console.log(this.datas);
        },
      });
    </script>
  </body>
</html>
